﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Behavior/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Behavior/Script.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $("#welcome").show();
            $("#loginMenu").hide();
            $("#Signup").hide();
            $('#userIsEmpty').hide();
            $('#passwordIsEmpty').hide();
            $('#passwordIsLess').hide();
            $('#lastnameIsEmpty').hide();
            $('#firstnameIsEmpty').hide();
            $('#pacmanInitialization').hide();
            $('#pacmanGame').hide();


            for (var i = new Date().getFullYear() ; i >= 1900; i--) {
                $('#yearpicker').append($('<option />').val(i).html(i));
            }

            for (var month = 1; month < 13; month++) {
                $('#monthpicker').append($('<option />').val(month).html(month));
            }

            for (var day = 1; day < 32; day++) {
                $('#daypicker').append($('<option />').val(day).html(day));
            }

            for (var dot = 50; dot <= 100; dot++) {
                $('#dotPicker').append($('<option />').val(dot).html(dot));
            }

            $('#signupForm').bind('submit', function (e) {
                var isValid;

                isValid = checkSignupForm();

                if (!isValid) {
                    e.preventDefault();
                }
                else {
                    addUser();
                    window.alert("User signup succeeded.\n" + "Please login with the same username and password.");
                    $("#Signup").hide();
                    $('#loginMenu').show();
                }
            });

            $('#newGame').click(function(){
                window.clearInterval(interval);
                audioElement.pause();
                gangnam.pause();
                $('#pacmanGame').hide();
                $('#pacmanInitialization').show();
            });

        });
    </script>
    <link href="Presentation/Style.css" rel="stylesheet" type="text/css" />
    <link href="Presentation/modal.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <header>
        <h2>
            <img src="Images/pacman-thumbsup.jpg" width="30" height="30" />
            Pacman by Nadav Lichtenshtein & Idan Morad
        </h2>
    </header>
    <nav id="MENU">
        <br />
        <br />
        <br />
        <input type="button" class="navButton" value="Welcome" onclick="showWelcome()" />
        <br />
        <br />
        <br />
        <input type="button" class="navButton" value="Login" onclick="showLogin()" />
        <br />
        <br />
        <br />
        <input type="button" class="navButton" value="Sign Up" onclick="showSignup()" />
    </nav>
    <section id="CONTENT">

        <!-- welcome screen -->
        <div id="welcome" style="text-align: center;">
            <h1>Welcome!</h1>
            <p>
                <img src="Images/pacman-thumbsup.jpg" width="300" height="300" />
            </p>

            <form>
                <button type="button" id="btnLogin" onclick="showLogin()" class="welcomeButton">Login</button>
                <button type="button" id="btnSignup" onclick="showSignup()" class="welcomeButton">Sign Up</button>
            </form>
        </div>
        <!-- end welcome screen-->

        <!-- login menu -->
        <div id="loginMenu" class="menu">
            <div class="topcorners"></div>
            <div class="loginForm">
                <form>
                    <table class="loginTable">
                        <tr>
                            <td>
                                <p>
                                    <strong>
                                        <label>Username</label>
                                    </strong>
                                </p>
                                <input id="txbUserName" class="inputtext" type="text" tabindex="1" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>
                                    <strong>
                                        <label>Password</label>
                                    </strong>
                                </p>
                                <input id="txbPassword" class="inputtext" type="password" tabindex="2" />
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-top: 10px;">
                                <input type="button" value="Login" tabindex="3" onclick="checkUser()" class="submitButton">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="bottomcorners"></div>
            <br />
            <br />
        </div>
        <!-- end login menu -->

        <!-- sign up menu-->
        <div id="Signup" class="menu">
            <div class="topcorners"></div>
            <div class="loginForm">
                <form action="mailto:idanmora@post.bgu.ac.il" method="GET" id="signupForm">
                    <table class="loginTable">
                        <tr>
                            <td>
                                <p>
                                    <strong>
                                        <label>Username</label>
                                    </strong>
                                </p>
                                <input id="txbSignupUsername" class="inputtext" type="text" tabindex="1" />
                                <span id="userIsEmpty" class="wanningMessage">
                                    <br />
                                    * user name is empty</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>
                                    <strong>
                                        <label>Password</label>
                                    </strong>
                                </p>
                                <input id="txbSignupPassword" class="inputtext" type="password" tabindex="2" />
                                <span id="passwordIsEmpty" class="wanningMessage">
                                    <br />
                                    * password is empty</span>
                                <span id="passwordIsLess" class="wanningMessage">
                                    <br />
                                    * the password is invalid, or less than 8 chararcters</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>
                                    <strong>
                                        <label>First Name</label>
                                    </strong>
                                </p>
                                <input id="firstName" class="inputtext" type="text" tabindex="3" />
                                <span id="firstnameIsEmpty" class="wanningMessage">
                                    <br />
                                    * the first name is empty</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>
                                    <strong>
                                        <label>Last Name</label>
                                    </strong>
                                </p>
                                <input id="lastName" class="inputtext" type="text" tabindex="4" />
                                <span id="lastnameIsEmpty" class="wanningMessage">
                                    <br />
                                    * the last name is empty</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>
                                    <strong>
                                        <label>Birth Date</label>
                                    </strong>
                                </p>
                                <table>
                                    <tr>
                                        <td>Year:</td>
                                        <td>Month:</td>
                                        <td>Day:</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <select name="yearpicker" id="yearpicker" tabindex="5"></select></td>
                                        <td>
                                            <select id="monthpicker" name="monthpicker" tabindex="6"></select></td>
                                        <td>
                                            <select id="daypicker" name="daypicker" tabindex="7"></select></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-top: 10px;">
                                <input type="submit" value="Sign Up" tabindex="8" class="submitButton">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="bottomcorners"></div>
        </div>
        <!-- end sign up menu -->

        <!-- pacman Initialization screen -->
        <div id="pacmanInitialization" style="text-align: center;">
            <h3>Game Initialization</h3>
            <table>
                <tr>
                    <td rowspan="2">
                        <strong>Pacman's colors:</strong>
                    </td>
                    <td>Body: 
                    </td>
                    <td>Eyes: 
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="bodyColor" type="color" value="#FFFF00" />
                    </td>
                    <td>
                        <input id="eyeColor" type="color" value="#000000" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>Select number of dots:</strong>
                    </td>
                    <td>
                        <select id="dotPicker"></select>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2">
                        <strong>Select special dots colors:</strong>
                    </td>
                    <td>5 points
                    </td>
                    <td>10 points
                    </td>
                    <td>20 points
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="5points" type="color" value="#000000" />
                    </td>
                    <td>
                        <input id="10points" type="color" value="#00FFFF" />
                    </td>
                    <td>
                        <input id="20points" type="color" value="#C40000" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>Gameplay time: (in sec)</strong>
                    </td>
                    <td colspan="3">
                        <input id="time" type="number" min="60" value="60" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>Player's name</strong>
                    </td>
                    <td colspan="3">
                        <input id="playerName" class="inputtext" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>Number of monsters:</strong>
                    </td>
                    <td>
                        <select id="numberOfMonsters">
                            <option value="3">3</option>
                            <option value="2">2</option>
                            <option value="1">1</option>
                        </select>
                    </td>
                </tr>
            </table>
            <input type="button" id="strat" value="Start!" class="contactButton" onclick="showPacmanGameScreen()" />
        </div>
        <!-- end pacman Initialization screen -->

        <!-- pacman game screen -->
        <div id="pacmanGame">
            <table>
                <tr>
                    <td colspan="3">
                        <input type="button" id="newGame" class="contactButton" value="New Game!"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        SCORE:
                        <input id="lblScore" type="text" />
                    </td>
                    <td>
                        TIME:
                        <input id="lblTime" type="text" />
                    </td>
                    <td>
                        LIFES:
                        <input id="lblLifes" type="text"/>
                    </td>
                </tr>
            </table>
            <canvas id="canvas" height="600" width="600"></canvas>
            <script type="text/javascript">
                var context = canvas.getContext("2d");
                var shape = new Object();
                var board;
                var score;
                var pac_color;
                var start_time;
                var time_elapsed;
                
                var interval;
                

                var pacmanNumber = 1;
                var dot5PointsNumber = 2;
                var dot10PointsNumber = 3;
                var dot20PointsNumber = 4;

                var mosterArray = new Array();

                var numOfMonsters;
                var lifes;
                var flag;
                
                var audioElement = document.createElement('audio');
                audioElement.setAttribute('src', "Sounds/Pac-Man Theme (REMIX).mp3");

                var gangnam = document.createElement('audio');
                gangnam.setAttribute('src', "Sounds/PSY - GANGNAM STYLE (-----) M_V.mp3");

                var startAngle = 0.15;
                var endAngle = 1.85;
                var eyeX = 5;
                var eyeY = -15;

                var dots;
                var bonus = false;
                var bonusTime;
                var showBonusOnCanvas = true;

                function Start() {
                    
                    var redGhost = { i: 0, j: 0 };
                    var redGhostImage = new Image();
                    redGhostImage.src = "Images/red.png";
                    mosterArray[0] = { Image: redGhostImage, position: redGhost };
                    
                    var orangeGhost = { i: 0, j: 9 };
                    var orangeGhostImage = new Image();
                    orangeGhostImage.src = "Images/orange.png";
                    mosterArray[1] = { Image: orangeGhostImage, position: orangeGhost };

                    var blueGhost = { i: 9, j: 9 };
                    var blueGhostImage = new Image();
                    blueGhostImage.src = "Images/blue.png";
                    mosterArray[2] = { Image: blueGhostImage, position: blueGhost };

                    flag = true;
                    lifes = 3;
                    audioElement.loop = true;
                    audioElement.currentTime = 2;
                    audioElement.play();
                    numOfMonsters = $('#numberOfMonsters').val();
                    board = new Array();
                    score = 0;
                    pac_color = $('#bodyColor').val();
                    var cnt = 100;
                    var foodRemain = $('#dotPicker').val();
                    dots = 0;

                    var precents5Points = 60;
                    var precents10Points = 30;
                    var precents20Points = 10;

                    var dot5PointsRemain = Math.round(foodRemain * precents5Points / cnt);
                    var dot10PointsRemain = Math.round(foodRemain * precents10Points / cnt);
                    var dot20PointsRemain = Math.round(foodRemain * precents20Points / cnt);
                    var pacmanRemain = 1;

                    start_time = new Date();
                    for (var i = 0; i < 10; i++) {
                        board[i] = new Array();
                        for (var j = 0; j < 10; j++) {

                            var randomNum = Math.random();
                            if (randomNum <= 1.0 * foodRemain / cnt) {
                                
                                var randomDotNumberFlag = false;
                                var randomDot;
                                var numberofRandom = 0;
                                while (!randomDotNumberFlag) {
                                    randomDot = Math.floor(Math.random() * (4 - 2 + 1)) + 2;
                                    numberofRandom++;
                                    switch (randomDot) {
                                    case 2:
                                        if (dot5PointsRemain > 0) {
                                            dot5PointsRemain--;
                                            board[i][j] = dot5PointsNumber;
                                            randomDotNumberFlag = true;
                                            numberofRandom = 0;
                                            dots++;
                                        }
                                        break;
                                    case 3:
                                        if ((dot10PointsRemain > 0) && checkVacinity(board, i, j, dot10PointsNumber)) {
                                            dot10PointsRemain--;
                                            board[i][j] = dot10PointsNumber;
                                            randomDotNumberFlag = true;
                                            numberofRandom = 0;
                                            dots++;
                                        }
                                        break;
                                    case 4:
                                        if ((dot20PointsRemain > 0) && checkVacinity(board, i, j, dot20PointsNumber)) {
                                            dot20PointsRemain--;
                                            board[i][j] = dot20PointsNumber;
                                            randomDotNumberFlag = true;
                                            numberofRandom = 0;
                                            dots++;
                                        }
                                        break;
                                    default:
                                        break;
                                    }
                                    if (numberofRandom == 20) {
                                        if (pacmanRemain > 0 && (i != 0 && j != 0)
                                            && (i != 0 && j != 10) && (i != 10 && j != 10)) {
                                            shape.i = i;
                                            shape.j = j;
                                            pacmanRemain--;
                                            board[i][j] = pacmanNumber;
                                            randomDotNumberFlag = true;
                                        }
                                        else {
                                            board[i][j] = 0;
                                            cnt--;
                                            randomDotNumberFlag = true;
                                        }
                                        
                                    }
                                }
                                if (!(board[i][j] == 0)) {
                                    foodRemain--;
                                }

                            } else if ((randomNum < 1.0 * (pacmanRemain + foodRemain) / cnt) && (i != 0 && j != 0)
                                && (i!=0 && j!=10) && (i!=10 && j!=10)) {
                                shape.i = i;
                                shape.j = j;
                                pacmanRemain--;
                                board[i][j] = pacmanNumber;
                            } else {
                                board[i][j] = 0;
                            }
                            cnt--;
                        }
                    }
                    keysDown = {};
                    addEventListener("keydown", function (e) {
                        keysDown[e.keyCode] = true;
                    }, false);
                    addEventListener("keyup", function (e) {
                        keysDown[e.keyCode] = false;
                    }, false);
                    
                    
                   interval = setInterval(UpdatePosition, 250);
                }

                function GetKeyPressed() {
                    if (keysDown[38]) {
                        return 1;
                    }
                    if (keysDown[40]) {
                        return 2;
                    }
                    if (keysDown[37]) {
                        return 3;
                    }
                    if (keysDown[39]) {
                        return 4;
                    }
                }

                function Draw() {
                    canvas.width = canvas.width;
                    lblScore.value = score;
                    lblTime.value = time_elapsed;
                    $('#lblLifes').val(lifes);
                    
                    for (var i = 0; i < 10; i++) {
                        for (var j = 0; j < 10; j++) {
                            var center = new Object();
                            center.x = i * 60 + 30;
                            center.y = j * 60 + 30;
                            if (board[i][j] == pacmanNumber) {
                                //pacman's body
                                context.beginPath();
                                context.arc(center.x, center.y, 30, startAngle * Math.PI, endAngle * Math.PI); // half circle
                                context.lineTo(center.x, center.y);
                                if (bonus) {
                                    if (pac_color != "#00FF00") {
                                        context.fillStyle = "#00FF00";
                                    }
                                    else {
                                        context.fillStyle = "#0000FF";
                                    }
                                }
                                else {
                                    context.fillStyle = pac_color; //color 
                                }
                                context.fill();
                                
                                //pacman's eye
                                context.beginPath();
                                context.arc(center.x + eyeX, center.y + eyeY, 5, 0, 2 * Math.PI); // half circle
                                context.fillStyle = $('#eyeColor').val(); //color 
                                context.fill();
                            }
                            else if (board[i][j] == dot5PointsNumber) {
                                
                                //dots
                                context.beginPath();
                                context.arc(center.x, center.y, 15, 0, 2 * Math.PI); // half circle
                                context.fillStyle = $('#5points').val(); //color 
                                context.fill();
                            }
                            else if (board[i][j] == dot10PointsNumber) {
                                context.beginPath();
                                context.arc(center.x, center.y, 15, 0, 2 * Math.PI); // half circle
                                context.fillStyle = $('#10points').val(); //color 
                                context.fill();
                            }
                            else if (board[i][j] == dot20PointsNumber) {
                                context.beginPath();
                                context.arc(center.x, center.y, 15, 0, 2 * Math.PI); // half circle
                                context.fillStyle = $('#20points').val(); //color 
                                context.fill();
                            }
                            
                        }
                    }

                    context.fillStyle = "black";
                    context.font = "24px Helvetica";
                    context.textAlign = "right";
                    context.textBaseline = "top";
                    context.fillText($('#playerName').val(), 590, 0);
                    
                    if(bonus) {
                        if (showBonusOnCanvas) {
                            showBonusOnCanvas = false;
                            context.fillStyle = "purple";
                            context.font = "36px Helvetica bold";
                            context.textAlign = "center";
                            context.textBaseline = "top";
                            context.fillText("B O N U S !", 300, 300);
                        }
                        else {
                            showBonusOnCanvas = true;
                        }
                    }
                    
                    for (var moster = 0; moster < numOfMonsters ; moster++)
                    {
                        context.drawImage(mosterArray[moster].Image, mosterArray[moster].position.i * 60, mosterArray[moster].position.j * 60, 60, 60);
                    }

                    
                } 

                function UpdatePosition() {
                    
                    if (flag) {
                        flag = false;
                        var moster;
                        for (moster = 0; moster < numOfMonsters; moster++) {
                            var horizon = Math.abs(mosterArray[moster].position.i - shape.i);
                            var vertical = Math.abs(mosterArray[moster].position.j - shape.j);

                            if (horizon == 0) {
                                if (shape.j < mosterArray[moster].position.j) {
                                    if (!bonus) {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i, mosterArray[moster].position.j - 1, numOfMonsters)) {
                                            if (mosterArray[moster].position.j > 0) {
                                                mosterArray[moster].position.j += -1;
                                            }
                                        }
                                    }
                                    else {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i, mosterArray[moster].position.j + 1, numOfMonsters)) {
                                            if (mosterArray[moster].position.j < 9) {
                                                mosterArray[moster].position.j += 1;
                                            }
                                        }
                                    }
                                }
                                else {
                                    if (!bonus) {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i, mosterArray[moster].position.j + 1, numOfMonsters)) {
                                            if (mosterArray[moster].position.j < 9) {
                                                mosterArray[moster].position.j += 1;
                                            }
                                        }
                                    }
                                    else {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i, mosterArray[moster].position.j - 1, numOfMonsters)) {
                                            if (mosterArray[moster].position.j > 0) {
                                                mosterArray[moster].position.j += -1;
                                            }
                                        }
                                    }
                                }
                            }
                            else if (vertical == 0) {
                                if (shape.i < mosterArray[moster].position.i) {
                                    if (!bonus) {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i - 1, mosterArray[moster].position.j, numOfMonsters)) {
                                            if (mosterArray[moster].position.i > 0) {
                                                mosterArray[moster].position.i += -1;
                                            }
                                        }
                                    }
                                    else {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i + 1, mosterArray[moster].position.j, numOfMonsters)) {
                                            if (mosterArray[moster].position.i < 9) {
                                                mosterArray[moster].position.i += 1;
                                            }
                                        }
                                    }
                                }
                                else {
                                    if (!bonus) {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i + 1, mosterArray[moster].position.j, numOfMonsters)) {
                                            if (mosterArray[moster].position.i < 9) {
                                                mosterArray[moster].position.i += 1;
                                            }
                                        }
                                    }
                                    else {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i - 1, mosterArray[moster].position.j, numOfMonsters)) {
                                            if (mosterArray[moster].position.i > 0) {
                                                mosterArray[moster].position.i += -1;
                                            }
                                        }
                                    }
                                }
                            } else if (horizon < vertical) {
                                if (shape.i < mosterArray[moster].position.i) {
                                    if (!bonus) {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i - 1, mosterArray[moster].position.j, numOfMonsters)) {
                                            if (mosterArray[moster].position.i > 0) {
                                                mosterArray[moster].position.i += -1;
                                            }
                                        }
                                    }
                                    else {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i + 1, mosterArray[moster].position.j, numOfMonsters)) {
                                            if (mosterArray[moster].position.i < 9) {
                                                mosterArray[moster].position.i += 1;
                                            }
                                        }
                                    }
                                } else {
                                    if (!bonus) {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i + 1, mosterArray[moster].position.j, numOfMonsters)) {
                                            if (mosterArray[moster].position.i < 9) {
                                                mosterArray[moster].position.i += 1;
                                            }
                                        }
                                    }
                                    else {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i - 1, mosterArray[moster].position.j, numOfMonsters)) {
                                            if (mosterArray[moster].position.i > 0) {
                                                mosterArray[moster].position.i += -1;
                                            }
                                        }
                                    }
                                }
                            } else {
                                if (shape.j < mosterArray[moster].position.j) {
                                    if (!bonus) {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i, mosterArray[moster].position.j - 1, numOfMonsters)) {
                                            if (mosterArray[moster].position.j > 0) {
                                                mosterArray[moster].position.j += -1;
                                            }
                                        }
                                    }
                                    else {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i, mosterArray[moster].position.j + 1, numOfMonsters)) {
                                            if (mosterArray[moster].position.j < 9) {
                                                mosterArray[moster].position.j += 1;
                                            }
                                        }
                                    }
                                }
                                else {
                                    if (!bonus) {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i, mosterArray[moster].position.j + 1, numOfMonsters)) {
                                            if (mosterArray[moster].position.j < 9) {
                                                mosterArray[moster].position.j += 1;
                                            }
                                        }
                                    }
                                    else {
                                        if (checkForMoster(mosterArray, moster, mosterArray[moster].position.i, mosterArray[moster].position.j - 1, numOfMonsters)) {
                                            if (mosterArray[moster].position.j < 0) {
                                                mosterArray[moster].position.j += -1;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    else {
                        flag = true;
                    }
                    
                    board[shape.i][shape.j] = 0;
                    var x = GetKeyPressed();
                    if (x == 1) {
                        //up
                        if (shape.j > 0) {
                            shape.j--;
                            startAngle = 1.75;
                            endAngle = 1.25;
                            eyeX = 15;
                            eyeY = 5;
                        }
                    }
                    if (x == 2) {
                        //down
                        if (shape.j < 9) {
                            shape.j++;
                            startAngle = 0.75;
                            endAngle = 0.25;
                            eyeX = 15;
                            eyeY = -5;
                        }
                    }
                    if (x == 3) {
                        //left
                        if (shape.i > 0) {
                            shape.i--;
                            startAngle = 1.15;
                            endAngle = 0.85;
                            eyeX = 5;
                            eyeY = -15;
                        }
                    }
                    if (x == 4) {
                        //right
                        if (shape.i < 9) {
                            shape.i++;
                            startAngle = 0.15;
                            endAngle = 1.85;
                            eyeX = 5;
                            eyeY = -15;
                        }
                    }

                    var scoreBefore = score;
                    
                    if (board[shape.i][shape.j] == dot5PointsNumber) {
                        score = score + 5;
                        dots--;
                    }
                    if (board[shape.i][shape.j] == dot10PointsNumber) {
                        score = score + 10;
                        dots--;
                    }
                    if (board[shape.i][shape.j] == dot20PointsNumber) {
                        score = score + 20;
                        dots--;
                    }

                    board[shape.i][shape.j] = pacmanNumber;
                    for (moster = 0; moster < numOfMonsters ; moster++) {
                        if (mosterArray[moster].position.i == shape.i && mosterArray[moster].position.j == shape.j) {
                            if (!bonus) {
                                board[shape.i][shape.j] = 0;
                                lifes--;
                                shape.i = Math.floor(Math.random() * 9);
                                shape.j = Math.floor(Math.random() * 9);
                                board[shape.i][shape.j] = pacmanNumber;
                            }
                            else {
                                score = score + 30;
                                mosterArray[moster].position.i = Math.floor(Math.random() * 9);
                                mosterArray[moster].position.j = Math.floor(Math.random() * 9);
                            }
                        }
                    }
                    

                    var currentTime = new Date();
                    time_elapsed = (currentTime - start_time) / 1000;

                    if ((Math.floor(score / 100) != Math.floor(scoreBefore / 100)) && (scoreBefore > 0) && (!bonus)) {
                        audioElement.pause();
                        gangnam.currentTime = 9;
                        gangnam.play();
                        bonus = true;
                        bonusTime = currentTime;
                    }
                    
                    if ((currentTime - bonusTime)/1000 > 10) {
                        gangnam.pause();
                        bonus = false;
                        audioElement.play();
                    }
                    
                    if(lifes <= 0 || (time_elapsed > $('#time').val())) {
                        window.clearInterval(interval);
                        audioElement.pause();
                        var message = "YOU LOST\n";
                        if(score < 100) {
                            message += "you can do better\n"+"score: "+score;
                        }
                        window.alert(message);
                    }
                    
                    
                    if (dots <= 0) {
                        window.clearInterval(interval);
                        gangnam.pause();
                        audioElement.pause();
                        window.alert("WINNER");
                    }
                    else {
                        Draw();
                    }
                }
            </script>
        </div>
        <!-- end pacman game screen -->

    </section>
    <footer>
        <p align="center">
            <strong>
                <a href="mailto:idanmora@post.bgu.ac.il" class="contactButton">Contact Us!</a>
                <a href="#modal" class="navButton">About</a><br />
                This site was build as second assignment in Internet Programming Environments course.
            </strong>
        </p>
    </footer>
    <aside id="modal">
        <header>
            <h2 style="color: black">About</h2>
        </header>
        <section>
            <p>
                This site was constracted by: Nadav Lichtenshtein & Idan Morad. <br/>
                the use of the JQUERY PLUGIN was in: 
                <ul>
                    <li>Selectors - in order to get to controls in the DOM.</li>
                    <li>Val - we used the val function in order to get and set controls' values.</li>
                    <li>Match - we used this function in order to validate that the password is alpha-numeric.</li>
                    <li>Hide & Show - we used those function in order to switch dislay between the div tags.</li>
                    <li>Bind - we used this function to add events to buttons.</li>
                    <li>Length - we used this property in order to validate the leghth of the password and username.</li>
                </ul>
                we used template in order to create this about window (<a href="http://cameronbaney.com/2012/07/26/pure-html5css3-responsive-modal-window/" target="_blank">source</a>)
                and to create the buttons styles (<a href="http://www.cssbuttongenerator.com/" target="_blank">source</a>).<br/>
                The difficulties of site was the debuging of the application, and agian like the first assinment the design of the 
                site.<br/>
                Our Homepages: <a href="http://atar.host56.com/" target="_blank">Nadav Lichtenshtein</a> & <a href="https://dl.dropboxusercontent.com/u/14591137/PersonalSite/PersonalSite/index.html" target="_blank">Idan Morad</a>
            </p>
        </section>
        <footer style="text-align: right;">
            <a href="#" class="submitButton">Close</a>
        </footer>
    </aside>
</body>
</html>
